<template>
  <div class="dashboard-container">
    <!-- 用户个人信息卡片 -->
    <el-row :gutter="20" class="user-info-section">
      <el-col :span="24">
        <el-card class="user-card">
          <div class="user-header">
            <div class="user-avatar">
              <img :src="userInfo.avatar || require('@/assets/images/profile.jpg')" alt="用户头像" />
            </div>
            <div class="user-details">
              <h2>{{ userInfo.nickName || userInfo.userName }}</h2>
              <p class="user-role">{{ userRoles.join(', ') }}</p>
              <p class="user-dept">{{ userDept }}</p>
              <div class="user-stats">
                <div class="stat-item">
                  <span class="stat-label">学号</span>
                  <span class="stat-value">{{ userInfo.studentId || '未填写' }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">专业</span>
                  <span class="stat-value">{{ userInfo.major || '未填写' }}</span>
                </div>
                <div class="stat-item">
                  <span class="stat-label">班级</span>
                  <span class="stat-value">{{ userInfo.className || '未填写' }}</span>
                </div>
              </div>
            </div>
            <div class="user-actions">
              <el-button type="primary" size="small" @click="editProfile">编辑资料</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文基本信息 -->
    <el-row :gutter="20" class="thesis-info-section">
      <el-col :span="24">
        <el-card class="thesis-card">
          <div slot="header" class="card-header">
            <span>毕业论文基本信息</span>
            <el-button type="text" @click="editThesisInfo">编辑</el-button>
          </div>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="论文题目">{{ thesisInfo.title || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="指导教师">{{ thesisInfo.advisor || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="论文类型">{{ thesisInfo.type || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="研究领域">{{ thesisInfo.field || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ thesisInfo.startDate || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{ thesisInfo.expectedEndDate || '未填写' }}</el-descriptions-item>
            <el-descriptions-item label="论文状态">
              <el-tag :type="getThesisStatusType(thesisInfo.status)">{{ getThesisStatusText(thesisInfo.status) }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="当前进度">
              <el-progress :percentage="thesisInfo.progress || 0" :color="customColor"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
          <div class="thesis-summary" v-if="thesisInfo.summary">
            <h4>论文摘要</h4>
            <p>{{ thesisInfo.summary }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 毕业论文成果 -->
    <el-row :gutter="20" class="thesis-results-section">
      <el-col :span="24">
        <el-card class="results-card">
          <div slot="header" class="card-header">
            <span>毕业论文成果</span>
            <el-button type="primary" size="small" @click="addResult">添加成果</el-button>
          </div>
          <el-tabs v-model="activeResultTab" @tab-click="handleResultTabClick">
            <el-tab-pane label="研究成果" name="research">
              <el-table :data="researchResults" style="width: 100%">
                <el-table-column prop="title" label="成果标题" width="200"></el-table-column>
                <el-table-column prop="type" label="类型" width="120">
                  <template slot-scope="scope">
                    <el-tag size="small">{{ getResultTypeText(scope.row.type) }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
                <el-table-column prop="date" label="日期" width="120"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewResult(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deleteResult(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="发表论文" name="papers">
              <el-table :data="publishedPapers" style="width: 100%">
                <el-table-column prop="title" label="论文标题" width="250"></el-table-column>
                <el-table-column prop="journal" label="期刊/会议" width="200"></el-table-column>
                <el-table-column prop="authors" label="作者" width="150"></el-table-column>
                <el-table-column prop="publishDate" label="发表日期" width="120"></el-table-column>
                <el-table-column prop="index" label="索引" width="100">
                  <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.index">{{ scope.row.index }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewPaper(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deletePaper(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="专利成果" name="patents">
              <el-table :data="patents" style="width: 100%">
                <el-table-column prop="title" label="专利名称" width="250"></el-table-column>
                <el-table-column prop="patentNo" label="专利号" width="150"></el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                  <template slot-scope="scope">
                    <el-tag size="small">{{ scope.row.type }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                  <template slot-scope="scope">
                    <el-tag size="small" :type="getPatentStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="applicationDate" label="申请日期" width="120"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="viewPatent(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="deletePatent(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加/编辑成果对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="resultForm" :rules="resultRules" ref="resultForm" label-width="100px">
        <el-form-item label="成果类型" prop="type">
          <el-select v-model="resultForm.type" placeholder="请选择成果类型" style="width: 100%">
            <el-option label="研究成果" value="research"></el-option>
            <el-option label="发表论文" value="paper"></el-option>
            <el-option label="专利成果" value="patent"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="resultForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="resultForm.description" placeholder="请输入描述" :rows="4"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="resultForm.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <!-- 论文特有字段 -->
        <template v-if="resultForm.type === 'paper'">
          <el-form-item label="期刊/会议" prop="journal">
            <el-input v-model="resultForm.journal" placeholder="请输入期刊/会议名称"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="authors">
            <el-input v-model="resultForm.authors" placeholder="请输入作者，多个作者用逗号分隔"></el-input>
          </el-form-item>
          <el-form-item label="索引" prop="index">
            <el-input v-model="resultForm.index" placeholder="请输入索引，如SCI、EI等"></el-input>
          </el-form-item>
        </template>
        <!-- 专利特有字段 -->
        <template v-if="resultForm.type === 'patent'">
          <el-form-item label="专利号" prop="patentNo">
            <el-input v-model="resultForm.patentNo" placeholder="请输入专利号"></el-input>
          </el-form-item>
          <el-form-item label="专利类型" prop="patentType">
            <el-select v-model="resultForm.patentType" placeholder="请选择专利类型" style="width: 100%">
              <el-option label="发明专利" value="发明专利"></el-option>
              <el-option label="实用新型" value="实用新型"></el-option>
              <el-option label="外观设计" value="外观设计"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专利状态" prop="patentStatus">
            <el-select v-model="resultForm.patentStatus" placeholder="请选择专利状态" style="width: 100%">
              <el-option label="申请中" value="申请中"></el-option>
              <el-option label="已授权" value="已授权"></el-option>
              <el-option label="已驳回" value="已驳回"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="申请日期" prop="applicationDate">
            <el-date-picker
              v-model="resultForm.applicationDate"
              type="date"
              placeholder="选择申请日期"
              style="width: 100%">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveResult">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 使用模拟数据，无需API调用

export default {
  name: 'Dashboard',
  data() {
    return {
      // 用户信息 - 模拟数据
      userInfo: {
        userName: 'zhangsan',
        nickName: '张三',
        avatar: require('@/assets/images/profile.jpg'),
        studentId: '2021001',
        major: '计算机科学与技术',
        className: '计科2101班'
      },
      userRoles: ['学生'],
      userDept: '计算机学院',
      
      // 论文信息 - 模拟数据
      thesisInfo: {
        title: '基于深度学习的图像识别系统研究',
        advisor: '张教授',
        type: '硕士论文',
        field: '计算机科学与技术',
        startDate: '2023-09-01',
        expectedEndDate: '2024-06-30',
        status: '进行中',
        progress: 65,
        summary: '本文主要研究基于深度学习的图像识别技术，通过改进现有算法，提高图像识别的准确率和效率。实验结果表明，所提出的方法在多个公开数据集上均取得了较好的效果。'
      },
      
      // 成果相关 - 模拟数据
      activeResultTab: 'research',
      researchResults: [
        {
          id: 1,
          title: '图像识别算法优化',
          type: '算法',
          description: '通过改进卷积神经网络结构，提高图像识别的准确率',
          date: '2023-12-15'
        },
        {
          id: 2,
          title: '数据集构建与标注',
          type: '数据',
          description: '构建了一个包含10万张图像的数据集，并进行精确标注',
          date: '2023-11-20'
        }
      ],
      publishedPapers: [
        {
          id: 1,
          title: '基于深度学习的图像识别系统研究',
          journal: '计算机学报',
          authors: '张三, 李四, 王五',
          publishDate: '2023-10-15',
          index: 'SCI'
        }
      ],
      patents: [
        {
          id: 1,
          title: '一种基于深度学习的图像识别方法',
          patentNo: 'CN202310123456.7',
          type: '发明专利',
          status: '申请中',
          applicationDate: '2023-09-20'
        }
      ],
      
      // 对话框相关
      dialogVisible: false,
      dialogTitle: '添加成果',
      resultForm: {
        type: 'research',
        title: '',
        description: '',
        date: '',
        journal: '',
        authors: '',
        index: '',
        patentNo: '',
        patentType: '',
        patentStatus: '',
        applicationDate: ''
      },
      resultRules: {
        type: [{ required: true, message: '请选择成果类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }]
      },
      
      // 进度条颜色
      customColor: '#409EFF'
    }
  },
  created() {
    // 无需API调用，直接使用模拟数据
  },
  methods: {
    // 编辑个人资料
    editProfile() {
      this.$router.push('/user/profile')
    },
    
    // 编辑论文信息
    editThesisInfo() {
      this.$message.info('论文信息编辑功能待实现')
    },
    
    // 添加成果
    addResult() {
      this.dialogTitle = '添加成果'
      this.resultForm = {
        type: 'research',
        title: '',
        description: '',
        date: '',
        journal: '',
        authors: '',
        index: '',
        patentNo: '',
        patentType: '',
        patentStatus: '',
        applicationDate: ''
      }
      this.dialogVisible = true
    },
    
    // 保存成果
    saveResult() {
      this.$refs.resultForm.validate(valid => {
        if (valid) {
          // 根据类型添加到相应的列表
          if (this.resultForm.type === 'research') {
            this.researchResults.push({
              id: Date.now(),
              title: this.resultForm.title,
              type: this.resultForm.type,
              description: this.resultForm.description,
              date: this.formatDate(this.resultForm.date)
            })
          } else if (this.resultForm.type === 'paper') {
            this.publishedPapers.push({
              id: Date.now(),
              title: this.resultForm.title,
              journal: this.resultForm.journal,
              authors: this.resultForm.authors,
              publishDate: this.formatDate(this.resultForm.date),
              index: this.resultForm.index
            })
          } else if (this.resultForm.type === 'patent') {
            this.patents.push({
              id: Date.now(),
              title: this.resultForm.title,
              patentNo: this.resultForm.patentNo,
              type: this.resultForm.patentType,
              status: this.resultForm.patentStatus,
              applicationDate: this.formatDate(this.resultForm.applicationDate)
            })
          }
          
          this.dialogVisible = false
          this.$message.success('添加成功')
        }
      })
    },
    
    // 查看成果详情
    viewResult(row) {
      this.$message.info(`查看成果: ${row.title}`)
    },
    
    // 删除成果
    deleteResult(row) {
      this.$confirm('确定要删除该成果吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从相应的列表中删除
        const index = this.researchResults.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.researchResults.splice(index, 1)
          this.$message.success('删除成功')
        }
      })
    },
    
    // 查看论文详情
    viewPaper(row) {
      this.$message.info(`查看论文: ${row.title}`)
    },
    
    // 删除论文
    deletePaper(row) {
      this.$confirm('确定要删除该论文吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.publishedPapers.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.publishedPapers.splice(index, 1)
          this.$message.success('删除成功')
        }
      })
    },
    
    // 查看专利详情
    viewPatent(row) {
      this.$message.info(`查看专利: ${row.title}`)
    },
    
    // 删除专利
    deletePatent(row) {
      this.$confirm('确定要删除该专利吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.patents.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.patents.splice(index, 1)
          this.$message.success('删除成功')
        }
      })
    },
    
    // 切换成果标签页
    handleResultTabClick(tab) {
      this.activeResultTab = tab.name
    },
    
    // 获取论文状态文本
    getThesisStatusText(status) {
      const statusMap = {
        '未开始': '未开始',
        '进行中': '进行中',
        '已完成': '已完成',
        '已提交': '已提交'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取论文状态类型
    getThesisStatusType(status) {
      const typeMap = {
        '未开始': 'info',
        '进行中': 'primary',
        '已完成': 'success',
        '已提交': 'warning'
      }
      return typeMap[status] || 'info'
    },
    
    // 获取成果类型文本
    getResultTypeText(type) {
      const typeMap = {
        'research': '研究成果',
        'paper': '发表论文',
        'patent': '专利成果'
      }
      return typeMap[type] || type
    },
    
    // 获取专利状态类型
    getPatentStatusType(status) {
      const typeMap = {
        '申请中': 'warning',
        '已授权': 'success',
        '已驳回': 'danger'
      }
      return typeMap[status] || 'info'
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = (d.getMonth() + 1).toString().padStart(2, '0')
      const day = d.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .user-info-section {
    margin-bottom: 20px;
    
    .user-card {
      .user-header {
        display: flex;
        align-items: center;
        
        .user-avatar {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 20px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .user-details {
          flex: 1;
          
          h2 {
            margin: 0 0 10px 0;
            font-size: 24px;
            color: #303133;
          }
          
          .user-role {
            margin: 0 0 5px 0;
            color: #909399;
          }
          
          .user-dept {
            margin: 0 0 15px 0;
            color: #606266;
          }
          
          .user-stats {
            display: flex;
            
            .stat-item {
              margin-right: 30px;
              
              .stat-label {
                display: block;
                font-size: 12px;
                color: #909399;
                margin-bottom: 5px;
              }
              
              .stat-value {
                font-size: 14px;
                color: #303133;
                font-weight: bold;
              }
            }
          }
        }
        
        .user-actions {
          margin-left: 20px;
        }
      }
    }
  }
  
  .thesis-info-section {
    margin-bottom: 20px;
    
    .thesis-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      
      .thesis-summary {
        margin-top: 20px;
        
        h4 {
          margin-bottom: 10px;
          color: #303133;
        }
        
        p {
          line-height: 1.6;
          color: #606266;
        }
      }
    }
  }
  
  .thesis-results-section {
    .results-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>